<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商家列表</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="./css/merchant.css">
</head>
<body>
<div id="backstage" class="layui-layout layui-layout-admin">
    <union-header :header="header"></union-header>
    <uniocn-side :side="side"></uniocn-side>
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div class="finance-com" id="business">
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                <ul class="layui-tab-title">
                    <li class="layui-this">
                        入驻中
                        <button class="layui-btn layui-btn-primary layui-btn-xs"
                                style="background: #F8AC59;border: none;color: #fff;">11
                        </button>
                    </li>
                    <li>带入驻</li>
                    <li>暂停中</li>
                    <li>已到期</li>
                    <li>垃圾箱</li>
                    <li>待审核</li>
                </ul>
            </div>
            <div class="search-box">
                <form class="layui-form" action="##">
                    <div class="layui-input-block">
                        <input type="text" placeholder="可查询 商户ID/商户名称/商户联系人名称/商户联系人电话" name="title" required
                               lay-verify="required" autocomplete="off" class="layui-input">
                        <button class="search-btn layui-btn layui-btn-primary">搜索</button>
                    </div>
                </form>
            </div>
            <div  style="box-sizing: border-box;padding:15px;background: #fff;margin-top: 15px">
                <table class="layui-table">
                    <colgroup>
                        <col width="5%">
                        <col width="10%">
                        <col width="10%">
                        <col width="10%">
                        <col width="20%">
                        <col width="15%">
                        <col width="15%">
                        <col width="15%">
                    </colgroup>
                    <tr>
                        <th><input type="checkbox" v-model="isCheckedAll" @change="checkedAll()"></th>
                        <th class="id">ID</th>
                        <th class="name">商户名称</th>
                        <th class="shopowner">店长</th>
                        <th class="category">所属类别</th>
                        <th class="time">时间</th>
                        <th class="states">现在状态</th>
                        <th class="operation">操作</th>
                    </tr>
                    <tr v-for="(item,index) in tableList">
                        <td><input type="checkbox" v-model="item.choose" @change="itemChecked()"></td>
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.shopowner}}</td>
                        <td>
                            <button style="margin-right: 5px"
                                    v-for="c in item.category"
                                    class="layui-btn layui-btn-primary layui-btn-sm"
                            >{{c}}
                            </button>
                        </td>
                        <td>
                            <p>入驻:{{item.startTime}}</p>
                            <p>到期:{{item.endTime}}</p>
                        </td>
                        <td>
                            <button class="layui-btn layui-btn-sm" style="background: #5FB878">{{item.states}}</button>
                        </td>
                        <td style="color: #3E85C0;">
                            <a class="">编辑</a><br>
                            <a class="">小程序路径</a>-
                            <a class="" @click="del(index)">删除</a>
                        </td>
                    </tr>
                    <tr v-if="tableList.length<=0">
                        <td colspan="8" style="text-align: center;color: #999;">暂无数据...</td>
                    </tr>
                </table>
                <div class="tabBox">
                    <button class="layui-btn layui-btn-primary" @click="delChecked">删除选中商户</button>
                    <div id="businessPage"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="layui/layui.js"></script>
<script src="./js/jquery-3.2.1.min.js"></script>
<script src="./js/vue2.5.16.js"></script>
<script src="./js/public.js"></script>
<script src="./js/data.js"></script>
<script>
    layui.use(['laypage', 'layer'], function () {
        var laypage = layui.laypage;
        var layer = layui.layer;
        //执行一个laypage实例
        laypage.render({
            elem: 'businessPage' //注意，这里的 test1 是 ID，不用加 # 号
            , count: 50 //数据总数，从服务端得到
        });
    });
    new Vue({
        el: "#backstage",
        data: {
            header: data.header,
            side: data.side,
            tableList: [
                {
                    choose: false, id: "001", name: "勇气", shopowner: "李白", category: ['母婴专区', '母婴专区'],
                    startTime: "2017-12-23 12:00:00", endTime: "2018-12-23 12:00:00", states: "入驻中",
                }, {
                    choose: false, id: "000", name: "勇气", shopowner: "李白", category: ['母婴专区', '母婴专区'],
                    startTime: "2017-12-23 12:00:00", endTime: "2018-12-23 12:00:00", states: "入驻中",
                },
            ],
            isCheckedAll: false
        },
        methods: {
            //单选
            itemChecked: function () {
                var that = this;
                var cur = that.tableList.filter(function (v, o) {
                    return v.choose == true
                })
                cur.length == that.tableList.length ? that.isCheckedAll = true : that.isCheckedAll = false
            },
            //全选
            checkedAll: function () {
                var tableList = this.tableList,
                    that = this;
                if (!that.isCheckedAll) {
                    for (var i = 0, len = tableList.length; i < len; i++) {
                        tableList[i].choose = that.isCheckedAll
                    }
                } else {
                    for (var i = 0, len = tableList.length; i < len; i++) {
                        tableList[i].choose = that.isCheckedAll
                    }
                }

            },
            //单个
            del: function (index) {
                var that = this;
                if (!that.tableList[index].choose) {
                    layer.msg('你还未选中！')
                } else {
                    layer.confirm('确认删除吗？', {
                        btn: ['确认', '取消'],
                    }, function () {
                        if (that.tableList[index].choose) {
                            that.tableList.splice(index, 1)
                        }
                        layer.msg('删除成功！', {icon: 1})
                    }, function () {
                        layer.msg('删除失败！')
                    })
                }
            },
            //删除选中(批量)
            delChecked: function () {
                var that = this;
                var arr = [];
                var cur = that.tableList.forEach(function (v, o) {
                    if (v.choose == true) {
                        arr.push(v.id)
                    }
                })
                if (arr.length > 0) {
                    layer.confirm('确认删除吗？', {
                        btn: ['确认', '取消'],
                    }, function () {
                        for (var i = 0, len = arr.length; i < len; i++) {
                            var id = arr[i];
                            for (var j = 0, listLen = that.tableList.length; j < listLen; j++) {
                                if (id == that.tableList[j].id) {
                                    that.tableList.splice(j, arr.length);
                                    layer.msg('删除成功！', {icon: 1});
                                    that.isCheckedAll = false
                                    return
                                }
                            }
                        }

                    }, function () {
                        layer.msg('删除失败！')
                    })
                } else {
                    layer.msg('你还未选中！')
                }

            },

        }


    })

</script>
</body>
</html>